

let BaseView = require('../BaseView');

let settings = require('../../settings');

let templateDiv = `
    <div class="res_dir">
        <div>
            <label>资源文件</label>
            <button id="btn_dir">设置目录</button>
        </div>
    <input id="resDirPath" type="text" disabled>
    <div class="res_dir_content" id="resContent"></div>
    </div>
`;

class DirView extends  BaseView{
    constructor(){
        super();

        this.rootEl = document.createElement('div');
        this.rootEl.classList.add('res');
        this.rootEl.classList.add('border');
        this.rootEl.innerHTML = templateDiv;

        let btnDir = this.rootEl.querySelector('#btn_dir');
        btnDir.addEventListener('click',()=>{
            let  dirPath  = settings.selectDir();
            if(dirPath){
                // this.resDirPath = dirPath;
                // this.lbResDirPath.value = this.model.resDirPath;
                // this.updateResContent(dirPath);
                this.setResDirPath(dirPath);
            }
        },false);

        this.lbResDirPath = this.rootEl.querySelector('#resDirPath');
        this.resContentEl = this.rootEl.querySelector('#resContent');

        // model
        // this.resDirPath = '';
        // this.init(this.resDirPath);
        this.setResDirPath('');
    }

    getResDirPath(){
        return this.resDirPath;
    }

    // getModel(){
    //     return this.model;
    // }

    setResDirPath(newPath){
        this.resDirPath = newPath;
        this.lbResDirPath.value = this.resDirPath;
        if(this.resDirPath.length > 0 && window.fs.existsSync(this.resDirPath)){
            let stats = window.fs.statSync(this.resDirPath);
            if(stats.isDirectory()){
                this.updateResContent(this.resDirPath);
            }else{
                settings.alert('请设置一个目录!');
            }
        }else{
            // 清空所有
            this.resContentEl.innerHTML = '';
        }
    }

    // init(){
    //     this.lbResDirPath.value = this.resDirPath;
    //     if(this.resDirPath.length > 0 && window.fs.existsSync(this.resDirPath)){
    //         let stats = window.fs.statSync(this.resDirPath);
    //         if(stats.isDirectory()){
    //             this.updateResContent(this.resDirPath);
    //         }else{
    //             alert('请设置一个目录!');
    //         }
    //     }
    // }

    updateResContent(dirPath){

        // 1.清空所有得
        this.resContentEl.innerHTML = '';

        let path = window.path;
        let fs = window.fs;
        let lstFile =  fs.readdirSync(dirPath);
        lstFile.forEach(f=>{
            let extName = path.extname(f).toLowerCase();
            if(extName === '.png' ||
                extName === '.jpg' ||
                extName === 'jpeg'){
                // 添加一项
                this.addDecoItem(f);
            }
        });
        this.bindEvents();
    }

    addDecoItem(fileName){
        let divEl = document.createElement('div');
        divEl.setAttribute('draggable',"true");
        divEl.innerText = fileName;
        this.resContentEl.appendChild(divEl);
    }
    bindEvents(){
        let dirPath = this.resDirPath;
        Array.prototype.forEach.call(this.resContentEl.children,(div)=>{
            div.addEventListener('dragstart',function (e) {
                if(editor.isEditObjState()){
                    let fullPath  = window.path.join(dirPath,div.innerText);
                    e.dataTransfer.setData('img_path',fullPath);
                }else{
                    settings.alert('切换到物体编辑模式进行添加!');
                }
            });
        })
    }
}

module.exports = DirView;
